<template>
  <center>
<!--    <h1>实验进程管理系统</h1>-->
    <div id="poster">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="60px" class="ruleForm login-container" label-position="left">
        <h3 class="login_title">系统登录</h3>
        <el-form-item label="用户名" prop="user">
          <el-input type="username" v-model="ruleForm.user" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>

<!--        <el-form-item style="width: 100%">-->
          <el-button type="primary" style="width: 80%;  border: none" @click="submitForm('ruleForm')">登录</el-button>
<!--        </el-form-item>-->
      </el-form>
    </div>
<!--    <div id="poster">-->
<!--    <el-form class="login-container" label-position="left" label-width="0px">-->
<!--      <h3 class="login_title">系统登录</h3>-->
<!--      <el-form-item>-->
<!--        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item>-->
<!--        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item style="width: 100%">-->
<!--        <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    </div>-->
  </center>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus";
import GLOBAL from "@/utils/global_variable"

export default {
  name: "Login",
  data() {

    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };

    const validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        user: '',
        pass: '',
      },
      rules: {
        user: [
          {validator: validateUser, trigger: 'blur'}
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {

      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          get('/login_jys', {
              username: that.ruleForm.user,
              password: that.ruleForm.pass
            }).then(function (res) {
              if (res.code === 1) {
                GLOBAL.params.uid = res.data.uid
                GLOBAL.params.typeId = res.data.typeId
                GLOBAL.params.uname = res.data.uname
                that.$router.push({
                  name: "MainPage",
                  params: {
                    uid: res.data.uid,
                    typeId: res.data.typeId,
                    uname: res.data.uname
                  }
                })

                ElMessage.success({
                  showClose: true,
                  message: "登陆成功，欢迎您 " + res.data.uname,
                  type: "success",
                  center: true
                })
              } else {
                ElMessage.warning({
                  showClose: true,
                  message: "登陆失败,用户名或密码错误",
                  type: "warning",
                  center: true
                })
              }

          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}

</script>

<style scoped>

.ruleForm {
  margin-top: 70px;
  margin-bottom: 140px;
  width: max-content;
}

#poster {
  /*background:url("../assets/eva.jpg") no-repeat;*/
  /*background-position: center;*/
  height: 100%;
  width: 100%;
  background-size: cover;
  /*position: fixed;*/
}
body{
  margin: 0px;
  padding: 0;
}

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>